<script setup>
import {ref} from 'vue'
import {updataPasswordService} from '@/api/user'
// import { useUserStore } from '@/stores/user'

const formModel=ref({
    oldPassword: '',
    newPassword: '',
    newPassword2: ''
})
const form=ref()
const rules={
    oldPassword:[
        {required: true,message: '请输入旧密码'}
    ],
    newPassword:[
        {required: true,message: '请输入新密码'},
        {min: 5,max:12,message:'新密码长度需是5-12位'},
    ],
    newPassword2: [
    { required: true, message: "请再次输入密码" },
    {min: 5,max:12,message:'密码长度需是5-12位'},
    {
      validator: (rule, value, callback) => {
        if (formModel.value.newPassword === formModel.value.newPassword2) {
          callback();
        } else {
          callback(new Error("两次密码不一致"));
        }
      },
    },]
}

const onSubmit=async ()=>{
await form.value.validate()
const res=await updataPasswordService(formModel.value.oldPassword,formModel.value.newPassword)
ElMessage.success("密码修改成功");
form.value.resetFields()
console.log(res)
}
</script>

<template>
    
    <div style="width: 600px;">
        
  <el-form ref="form" :rules="rules" :model="formModel" label-width="auto" style="max-width: 600px">
        <el-form-item prop="oldPassword" label="旧密码">
      <el-input v-model="formModel.oldPassword" placeholder="输入旧密码" />
    </el-form-item>
    <el-form-item prop="newPassword" label="新密码">
        <el-input v-model="formModel.newPassword" placeholder="输入新密码"/>
    </el-form-item>
    <el-form-item prop="newPassword2" label="新密码">
        <el-input v-model="formModel.newPassword2" placeholder="再次输入新密码" />
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="onSubmit">提交</el-button>
      
    </el-form-item>
</el-form>
    </div>
</template>

<style scoped></style>